<!--
 * @Author: LALA
 * @Date: 2022-01-04 14:58:54
 * @LastEditTime: 2022-01-06 16:59:39
 * @LastEditors: LALA
 * @Description: 
 * @FilePath: \am-app\src\views\manager\OrderDetails.vue
 * 别乱动！
-->
<template>
  <div>
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    >
    </van-nav-bar>
      <!-- {{ order }} -->
    <div class="van-cell van-field">
        <div class="van-field__label">
          <span>工单类型</span>
        </div>
          <div class="right">
           <span> {{ order.type}}</span>
          </div>  
      </div>
     <div class="van-cell van-field">
        <div class="van-field__label">
          <span>工单状态</span>
        </div>
          <div class="right">
           <span> {{ order.status}}</span>
          </div>  
      </div>
      <div class="van-cell van-field">
        <div class="van-field__label">
          <span>项目名称</span>
        </div>
          <div class="right">
           <span>{{order.engineer_name }} </span>
          </div>  
      </div>
      <div class="van-cell van-field">
        <div class="van-field__label">
          <span>设备名称</span>
        </div>
          <div class="right">
           <span>{{ order.device_name }}</span>
          </div>  
      </div>
      <div class="van-cell van-field">
        <div class="van-field__label">
          <span>申报原因</span>
        </div>
          <div class="right">
            <span v-if=" order.bill_why == null">暂无</span>
            <span v-else>{{ order.bill_why}}</span>
           
          </div>  
      </div>
       <div class="van-cell van-field">
        <div class="van-field__label">
          <span>申报图片</span>
        </div>
          <div class="right">
            
          </div>  
      </div> 
      
      <div style="margin-top: 20px">
        <van-button type="info" @click="toConfirmHandler" style="width: 100%"
          >确认接单</van-button
        >
      </div>
    </div>

</template>
<script>
import { get } from "@/utils/request.js";
import { mapState } from "vuex";
import { Dialog, Notify } from "vant";
export default {
  data() {
    return {
      order: {},
      order_id: null,
     
    };
  },
  computed: {
    ...mapState("user", ["info"]),
  },
  methods: {

    // 根据id查询工单详情
    findWorkerOrderById(id) {
      get("/workorder/findById", { id }).then((res) => {
        this.order = res.data.order[0];
      });
    },
  
    // 确认接单按钮
    toConfirmHandler() {
      Dialog.confirm({
        title: "友情提示",
        message: "是否确认接单",
      }).then(() => {
        get("/workorder/takeOrder", {
          id: this.order_id,
          account_id: this.info.id,
        }).then((res) => {
          // 提示成功
          Notify({ type: "success", message: "接单成功" });
          // 跳转至我的工单
          this.$router.push({
            path: "/manager/order",
          });
        });
      });
    },
  },
  created() {
    this.order = this.$route.query.item;
    // 执行根据id查询工单数据的方法
    this.findWorkerOrderById(this.order_id);
  
  },
};
</script>
<style scoped>
.content {
  padding: 15px;
}
</style>
